<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript">
    $(document).ready(function() {       
        var fm = ["form", "child_container", "formId"];
        Page.createForm(fm);
        TempUtil.render('child_template', 'form', DOC);
        TempUtil.render('helper_template', 'apnHelper', DOC);
        Page.setStripeTable();
        var ApnList= new Array();
        function getData() {
            Page.postJSON({
                json: {
                    cmd: RequestCmd.GET_APN_CONFIG
                },
                success: function(datas) {
                   var apnData = datas.data[0];
                   $("input[name='apnEnable']").val(apnData.enable);
                   if(apnData.enable == "1"){
                        $("#apnEnable").attr("checked",true);
                   }else{
                        $("#apnDisable").attr("checked",true);
                   }
                   // $("input[name='apnNat']").val(apnData.nat);
                   if(apnData.nat == "enable"){
                         $("#apnNat1").attr("checked",true);
                   }else{
                         $("#apnNat2").attr("checked",true);
                   }
                   if(apnData.nat_lookback == "enable"){
                         $("#apnNatLookBack1").attr("checked",true);
                   }else{
                         $("#apnNatLookBack2").attr("checked",true);
                   }
                   $('#apn_mtu').val(apnData.mtu);
                   $("#selectType").val(apnData.ip_stack);
                   $("#apn_profile").val(apnData.profile_name);
                   $("#selectAuthentication").val(apnData.auth_type);
                   $("#apn_user_name").val(apnData.username);
                   $("#apn_user_password").val(apnData.password);
                   if($("#selectAuthentication").val() == "0"){
                      $(".hideNone").hide(0);
                   }else{
                    $(".hideNone").show(0);
                   }
                   if(apnData.apn_name == undefined || apnData.apn_name == ""){
                        $("#apn_name").val("");
                   }else{
                        $("#apn_name").val(apnData.apn_name);
                   }
                   
                   ApnList = datas.data;
                }
            });
        }
      getData();

      $("#selectAuthentication").change(function(){
        if($("#selectAuthentication").val() == "0"){
            $(".hideNone").hide(0);
        }else{
            $(".hideNone").show(0);
        }
      });

      var rules = {
            apnMTU: { required: true, range: [600, 1500] },
        },messages = {
            apnMTU: { required: CHECK.required.mtu, range: CHECK.format.mtu },
        };

      $("#btnSave").on("click",function(){
            $(this).attr("disabled",false);
        var apnEnable,selectType,apn_profile,selectAuthentication,apn_user_name,apn_user_password,apn_name,apn_apnNat;
            if($("#apnEnable").is(":checked")){
                apnEnable = 1;
            }else{
                apnEnable = 0;
            }
            apn_mtu = $('#apn_mtu').val();
            selectType =  $("#selectType").val();
            apn_profile =  $("#apn_profile").val();
            selectAuthentication =  $("#selectAuthentication").val();
            apn_user_name =  $("#apn_user_name").val();
            apn_user_password =  $("#apn_user_password").val();
            apn_name =  $("#apn_name").val();
            apn_apnNat = $("input[name='apnNat']:checked").val();
            $form = $("#form");
            if(!CheckUtil.checkForm($form, rules, messages)){
                $(this).attr("disabled",false);
                return;
            }

          var json={},json2= new Object();
          json.enable = parseInt(apnEnable,10);
          json.ip_stack = selectType;
          json.profile_name = apn_profile;
          json.auth_type = parseInt(selectAuthentication,10);
          json.username = apn_user_name;
          json.apn_name = apn_name;
          json.mtu = apn_mtu;
          json.password = apn_user_password;
          json.nat = apn_apnNat;
          json.nat_lookback = $("input[name='apnNatLookBack']:checked").val();
          ApnList.splice(0,1,json);

          json2.apnList = ApnList;
          json2.method = JSONMethod.POST;
          json2.cmd = RequestCmd.SET_APN_CONFIG;
            Page.postJSON({
                     json: json2,
                     success:function(data){
                        if(data.success == true){
                        SysUtil.rebootDevice(PROMPT.tips.rebootMessage);
                        }
                     }
                 })
      })

      $('#form').addClass("setting_apn_form");

    });
</script>

<div class="tab_boxes" id="child_container">
    <div id="formId">
    <script type="text/template" id="child_template">
    <!-- <form id="form" class="setting_apn_form "> -->
        <table class="detail" cellspacing="0" id="apn_box">
            <tr>
                <th>
                    <label><%-DOC.apn.nat %><%- colon %></label> 
                </th>
                <td>

                    <input type="radio" name="apnNat" id="apnNat1" value="enable"><span><%-DOC.status.enable %></span>&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="radio" name="apnNat" id="apnNat2" value="disable"><span><%-DOC.status.disable %></span> 
                </td>
            </tr>
            <tr>
                <th>
                    <label><%-DOC.apn.natLookBack %><%- colon %></label> 
                </th>
                <td>

                    <input type="radio" name="apnNatLookBack"  id="apnNatLookBack1" value="enable"><span><%-DOC.status.enable %></span>&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="radio" name="apnNatLookBack" id="apnNatLookBack2" value="disable"><span><%-DOC.status.disable %></span> 
                </td>
            </tr>
            <tr>
                <th><%-TAB.basic.apn %><%- colon %></th>
                <td>
                    <input type="text" name="apnName" id="apn_name">
                </td>
            </tr>
            <tr>
                <th><%-DOC.apn.mtu %><%- colon %></th>
                <td>
                    <input type="text" name="apnMTU" id="apn_mtu">
                </td>
            </tr>
            <tr id="apn_type">
                <th>
                    <%-DOC.apn.type %><%- colon %>
                </th>
                <td>
            <select style="width:150px;" id="selectType">
                    <option value="IP">IPV4</option>
                    <option value="IPV6">IPV6</option>
                    <option value="IPV4V6">IPV4V6</option>
            </select>
            </td>
            </tr>
            <tr id="apn_authentication">
                <th> <%-DOC.apn.authentication %><%- colon %></th>
                <td>
                    <select style="width:150px;" id="selectAuthentication">
                        <option value="0">NONE</option>
                        <option value="1">PAP</option>
                        <option value="2">CHAP</option>
                        <option value="3">PAP&CHAP</option>
                    </select>
                </td>
            </tr>
            
            <tr class="hideNone" style="display:none;">
                <th><%-DOC.apn.user %><%- colon %></th>
                <td>
                    <input type="text" name="apnUserName" id="apn_user_name">
                </td>
            </tr>
            <tr class="hideNone" style="display:none;">
                <th><%-DOC.apn.password %><%- colon %></th>
                <td>
                    <input type="text" name="apnUserPassword" id="apn_user_password">
                </td>
            </tr>
            <tr>
                <th></th>
                <td><input type="button" name="buttom" value="<%- networktoolhtml.form5.btnSetting %>" id="btnSave"/></td>
            </tr>
        
        </table>        
    <!-- </form> -->
    </script>
    </div>
    
        <div class = "setting_apn_helper" id="apnHelper">
            <script type="text/template" id="helper_template">
                <div class="helper_name"><%- DOC.apnHelper.title1 %></div>
                <div class="helper_desc"><%- DOC.apnHelper.name1 %></div>
    
                <div class="helper_name"><%- DOC.apnHelper.title2 %></div>
                <div class="helper_desc"><%- DOC.apnHelper.name2 %></div>
    
                <div class="helper_name"><%- DOC.apnHelper.title3 %></div>
                <div class="helper_desc"><%- DOC.apnHelper.name3 %></div>
    
                <div class="helper_name"><%- DOC.apnHelper.title4 %></div>
                <div class="helper_desc"><%- DOC.apnHelper.name4 %></div>
    
                <div class="helper_name"><%- DOC.apnHelper.title5 %></div>
                <div class="helper_desc"><%- DOC.apnHelper.name5 %></div>
    
                <div class="helper_name"><%- DOC.apnHelper.title8 %></div>
                <div class="helper_desc"><%- DOC.apnHelper.name8 %></div>
    
                <div class="helper_name"><%- DOC.apnHelper.title6 %></div>
                <div class="helper_desc"><%- DOC.apnHelper.name6 %></div>
    
                <div class="helper_name"><%- DOC.apnHelper.title7 %></div>
                <div class="helper_desc"><%- DOC.apnHelper.name7 %></div>
            </script>   
        </div>   
</div>

